<template>
  <div>
    <div class="header">
      <!-- 左头 -->
      <el-tag class="tag-title">
        <button type="button" class="ant-btn ant-btn-sm ant-btn-icon-only">
          <span role="img" aria-label="close" class="anticon anticon-close"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="close"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
              ></path></svg
          ></span>
        </button>

        <span class="ant-page-header-heading-title"
          ><input
            placeholder="请输入文章标题"
            type="text"
            class="ant-input"
            v-model="title"
            style="width: 300px"
        /></span>
      </el-tag>

      <!-- 右头 -->
      <span class="ant-page-header-heading-extra">
        <el-button type="primary" plain @click="putarticle">发布</el-button>
        <el-dropdown :hide-on-click="false" @command="handleCommand">
          <span class="el-dropdown-link">...</span>
          <el-dropdown-menu>
            <el-dropdown-item disabled>查看</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item>保存草稿</el-dropdown-item>
            <el-dropdown-item disabled>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <!-- 模板 -->
    <high-light>
      <mavon-editor v-model="html"> </mavon-editor>
    </high-light>

    <el-drawer title="文章设置" :visible.sync="drawer" :with-header="false">
      <div class="head">
        <span>文章设置</span>
        <span @click="cha">X</span>
      </div>

      <div class="abstract">
        <span>文章摘要</span>
        <div>
          <textarea
            placeholder="请输入文章摘要"
            class="ant-input _2JqVwlivDvuj5Yr3G6BP0A"
            :value="summary"
            style="
              height: 142px;
              min-height: 142px;
              max-height: 186px;
              overflow-y: hidden;
              resize: none;
            "
          ></textarea>
        </div>
      </div>

      <div class="div">
        <div>
          <span>访问密码</span
          ><el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
          ></el-input>
        </div>
        <div>
          <span>访问付费</span
          ><el-input
            placeholder="请输入费用"
            v-model="totalAmount"
            show-password
          ></el-input>
        </div>
      </div>

      <div class="switch">
        <div>
          <span> 开启评论</span>
          <el-switch
            v-model="isCommentable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div>
          <span>开启推荐</span>
          <el-switch
            v-model="isRecommended"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>

        <div class="demo-image">
          <div class="imgag">
            <span>文章封面</span>
            <div class="_3IFTNizfXdCWVFOnNGMoBI" @click="jump">
              <img :src="cover" alt="图片预览" />
            </div>
          </div>
          <input
            placeholder="或输入外部链接"
            type="text"
            class="ant-input"
            :value="jump1 ? cover : ''"
          />
          <button
            type="button"
            class="ant-btn"
            ant-click-animating-without-extra-node="false"
            @click="clear"
          >
            <span>移除</span>
          </button>
        </div>
      </div>
      <!-- 底部确认框 -->
      <el-button @click="btn" class="btn" type="primary" plain>确认</el-button>
    </el-drawer>
  </div>
</template>

<script>
import ImageViewer from "@/components/ImageViewer";
import HighLight from "@/components/HighLight";
import { mapState, mapActions } from "vuex";
import { mavonEditor } from "mavon-editor";
import { Message } from "element-ui";
import Piece from "@/components/Piece";
export default {
  name: "MarkdownDemo",
  components: { mavonEditor, ImageViewer, HighLight, Piece },
  data() {
    return {
      recommend: true,
      pw: true,
      jump1: false,
      cover:
        "https://bwcreation.oss-cn-beijing.aliyuncs.com/2021-12-02/29842afd880511ebb6edd017c2d2eca2.jpg",
      title: "",
      status: "publish",
      drawer: false,
      summary: "",
      isRecommended: false,
      isCommentable: false,
      password: "",
      totalAmount: "",
      id: new Date().getTime() + "",
      html: '<h1 id="欢迎使用-wipi-markdown-编辑器">欢迎使用 Wipi Markdown 编辑器</h1>\n<blockquote>\n  <ul>\n  <li>整理知识，学习笔记</li>\n  <li>发布日记，杂文，所见所想</li>\n  <li>撰写发布技术文稿（代码支持）</li>\n  </ul>\n</blockquote>\n<h2 id="什么是-markdown">什么是 Markdown</h2>\n<p>Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，<strong>粗体</strong> 或者 <em>斜体</em> 某些文字。</p>\n<h3 id="1-待办事宜-todo-列表">1. 待办事宜 Todo 列表</h3>\n<ul>\n<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> 支持以 PDF 格式导出文稿</li>\n<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> 新增 Todo 列表功能</li>\n</ul>\n<h3 id="2-高亮一段代码code">2. 高亮一段代码[^code]</h3>\n<pre><code class="python language-python">@requires_authorization\nclass SomeClass:\npass\n\nif __name__ ==:\n    # A comment\n    print `hello world`\n</code></pre>\n<h3 id="3-绘制表格">3. 绘制表格</h3>\n<table>\n<thead>\n<tr>\n<th>项目</th>\n<th style="text-align:right;">价格</th>\n<th style="text-align:center;">数量</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>计算机</td>\n<td style="text-align:right;">1600</td>\n<td style="text-align:center;">5</td>\n</tr>\n<tr>\n<td>手机</td>\n<td style="text-align:right;">12</td>\n<td style="text-align:center;">12</td>\n</tr>\n<tr>\n<td>管线</td>\n<td style="text-align:right;">10</td>\n<td style="text-align:center;">234</td>\n</tr>\n</tbody>\n</table>\n<h3 id="4-嵌入网址">4. 嵌入网址</h3>\n<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>\n<pre><code class="HTML language-HTML">&lt;iframe src="//player.bilibili.com/player.html?aid=77737877&amp;bvid=BV1xJ411z7eS&amp;cid=132993821&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"&gt; &lt;/iframe&gt;\n</code></pre>',
      content:
        '\n# 欢迎使用 Wipi Markdown 编辑器\n\n> * 整理知识，学习笔记\n> * 发布日记，杂文，所见所想\n> * 撰写发布技术文稿（代码支持）\n\n## 什么是 Markdown\n\nMarkdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，**粗体** 或者 *斜体* 某些文字。\n\n### 1. 待办事宜 Todo 列表\n\n- [ ] 支持以 PDF 格式导出文稿\n- [x] 新增 Todo 列表功能\n\n### 2. 高亮一段代码[^code]\n\n```python\n@requires_authorization\nclass SomeClass:\n    pass\n\nif __name__ == \'__main__\':\n    # A comment\n    print \'hello world\'\n```\n\n### 3. 绘制表格\n\n| 项目        | 价格   |  数量  |\n| --------   | -----:  | :----:  |\n| 计算机     | 1600 |   5     |\n| 手机        |   12   |   12   |\n| 管线        |    10    |  234  |\n\n### 4. 嵌入网址\n<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>\n\n```HTML\n<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>\n```\n',
    };
  },
  computed: {
    ...mapState({
      htmlList: (state) => state.all.htmlList,
    }),
  },

  methods: {
    ...mapActions({
      // getHtml: "all/getHtml",
      getNew: "all/getNew",
    }),

    //发布
    putarticle() {
      if (this.title !== "") {
        this.getNew({
          title: this.title,
          status: this.status,
          html: this.html,
          password: this.password,
          totalAmount: this.totalAmount,
          isRecommended: this.isRecommended,
          isCommentable: this.isCommentable,
          id: this.id,
          cover: this.cover,
          content: this.content,
        });
        Message.success("发布成功");
      } else {
        Message.error("请输入标题");
      }
    },

    //...点击事件
    handleCommand() {
      if (this.title !== "") {
        this.drawer = true;
      } else {
        Message.error("请输入标题");
      }
    },

    //点击图片跳转
    jump() {
      this.jump1 = true;
    },

    //清空图片地址
    clear() {
      this.cover = "";
    },

    //点击关闭弹框
    cha() {
      this.drawer = false;
    },

    //确认
    btn() {
      this.drawer = false;
    },
  },
};
</script>

<style scoped>
.header {
  margin-right: 16px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  justify-html: space-between;
}
.ant-page-header-heading-title {
  margin-right: 12px;
  margin-bottom: 0;
  color: #333;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._2zMNm79JZFNvsYks6hybn- ._1syxLD385DKbg2c7J0wN5D input {
  padding-right: 0;
  padding-left: 0;
  border-top: 0;
  border-left: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-right: 0;
}
.ant-input:placeholder-shown {
  text-overflow: ellipsis;
}
.ant-page-header-heading-extra {
  font-weight: 900;
  margin: 4px 0;
  white-space: nowrap;
  margin-right: 50px;
  font-size: 20px;
}
.ant-page-header-heading-extra .el-dropdown-link {
  margin-left: 30px;
}
.editor-container {
  margin-bottom: 30px;
}
.tag-title {
  margin-bottom: 5px;
}
.head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.head span {
  margin: 10px 25px;
  font-size: 20px;
}
.demo-image {
  width: 100%;
  height: 200px;
  margin-top: 20px;
}
.demo-image .imgag {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
}
.demo-image .imgag ._3IFTNizfXdCWVFOnNGMoBI {
  width: 80%;
  height: 200px;
  background: #ccc;
}
.demo-image .imgag ._3IFTNizfXdCWVFOnNGMoBI img {
  width: 100%;
  height: 100%;
}
.btn {
  position: fixed;
  bottom: 20px;
  right: 30px;
}
</style>
